<template>
<div class="container">
  <headers title="不合格任务" :refresh="isRefresh" path="/yongjin"></headers>
  <div class="content">
    <v-tabs type="tab"  @tabchange="tabChange">
      <v-tab name="toupiao-tasks" title="投票" status="active">
        <div class="list-block media-list no-margin">
          <ul v-for="task in taskData">
            <li class="item-content">
              <div class="item-inner row">
                <div class="pull-left col-80">
                  <div class="color-black text-overflow-ellipsis">{{task.voteTypeName}}审核没通过</div>
                  <div class="color-light size-12 text-overflow-ellipsis">不合格原因：价格设置没有达到要求，请重新提交</div>
                </div>
                <div class="pull-right col-20 item-button">
                  <a v-link="{path: '/buhegeimg/' + task.id, replace: true}" class="button button-fill button-danger">查看</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </v-tab>
      <v-tab name="article-tasks" title="文章">
        <div class="list-block media-list no-margin">
          <ul v-for="task in taskData">
            <li class="item-content">
              <div class="item-inner row ">
                <div class="pull-left col-80">
                  <div class="color-black text-overflow-ellipsis">{{task.voteTypeName}}审核没通过</div>
                  <div class="color-light size-12 text-overflow-ellipsis">不合格原因：价格设置没有达到要求，请重新提交</div>
                </div>
                <div class="pull-right col-20 item-button">
                  <a href="#" class="button button-fill button-danger">查看</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </v-tab>
    </v-tabs>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
</div>
</template>

<script>
import {loader} from '../util/util'
import $ from 'zepto'
import Headers from '../components/Headers'
import VTabs from '../components/Tabs'
import VTab from '../components/Tab'
import VLayer from '../components/PullToRefreshLayer'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getTaskData()
  },
  data () {
    return {
      isRefresh: true,
      taskData: [],
      taskStatus: 0
    }
  },
  methods: {
    tabChange (index) {
      this.$set('taskData', [])
      this.$set('taskStatus', index)
      this.getTaskData()
    },
    getTaskData () {
      loader.show()
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findUnQualifiedCustomerTask', {
        params: {
          customerId: store('customerId') || 0,
          voteTypeStatusCode: this.taskStatus
        }
      }).then((data) => {
        // console.log(data)
        this.$set('taskData', data.data)
        setTimeout(() => {
          loader.hide()
        }, 500)
      }, () => {
        loader.hide()
        $.alert('网络异常')
      })
    }
  },
  components: {
    Headers,
    VTabs,
    VTab,
    VLayer
  }
}
</script>
<style scoped>
.item-button{position:absolute;top:50%;margin-top:-13px;right:0px;}
</style>